<template>
  <div class="system">
    <!-- header -->
    <div class="system-header" v-if="headerText()">
      <h3>{{headerText()[0]}}</h3>
      <p>{{headerText()[1]}}</p>
    </div>
    <!-- select -->
    <div class="system-select">
      <!-- 事件趋势统计 -->
      <event-select v-if="reportType === 'event_trend'" />
      <!-- 工单完成时效统计 and 工单未完成时效统计 -->
      <task-select v-else-if="reportType === 'task_success' || reportType === 'task_failure'" :report-type="reportType" @taskParams="taskParams" />
      <!-- 产品报修率统计-事件 and 产品报修率统计-工单  -->
      <product-select v-else :report-type="reportType" @taskParams="taskParams" />
    </div>
    <!-- 图表 -->
    <!-- 事件趋势统计 -->
    <event-chart v-if="reportType === 'event_trend'" />
    <!-- 工单完成时效统计 and 工单未完成时效统计 -->
    <task-chart
      v-else-if="reportType === 'task_success' || reportType === 'task_failure'"
      @taskTable="taskParams"
      :task-charts="taskCharts"
      :params="params"
      ref="chars"
      @export-track="exportTrack"
      :report-type="reportType" />
    <!-- 产品报修率统计-事件 and 产品报修率统计-工单  -->
    <product-chart
      v-else
      :task-charts="taskCharts"
      @taskTable="taskParams"
      ref="chars"
      :params="params"
      v-loading="loading"
      :loading="loading"
      @export-track="exportTrack"
      :report-type="reportType"/>
  </div>
</template>
<script>

// components
import EventSelect from './components/eventSelect'
import EventChart from './components/eventChart'
import TaskSelect from './components/taskSelect'
import TaskChart from './components/taskChart'
import ProductSelect from './components/productSelect'
import ProductChart from './components/productChart'

// API
import * as ReportApi from '@src/api/ReportApi.ts';

export default {
  name: 'system-view',
  data() {
    return {
      reportType: '', // 报表类型
      params: {}, // 
      taskCharts: [], // 图表数据
      loading: false
    }
  },
  mounted() {
    this.reportType = window.location.href.split('type=')[1]
    if (this.reportType === 'task_success' || this.reportType === 'task_failure') {
      this.params = {
        taskStatusType: this.reportType === 'task_success' ? 2 : 1,
        consumeType: 0
      }
    }
    if (this.reportType === 'product_task') this.repaired()
  },
  methods:{
    headerText() {
      const {reportType} = this
      if (reportType === 'event_trend') return [this.$t('report.systemView.title1'), `${this.$t('report.systemView.tip1')}。`]

      if (reportType === 'task_success') return [this.$t('report.systemView.title2'), `${this.$t('report.systemView.tip2')}。`]

      if (reportType === 'task_failure') return [this.$t('report.systemView.title3'), `${this.$t('report.systemView.tip3')}。`]

      if (reportType === 'product_event') return [this.$t('report.systemView.title4'), `${this.$t('report.systemView.tip4')}。`]

      if (reportType === 'product_task') return [this.$t('report.systemView.title5'), `${this.$t('report.systemView.tip5')}。`]
    },
    // 头部筛选条件
    taskParams(params) {
      this.params = {...this.params, ...params}
      
      if(!params.sorts) {
        delete this.params.sorts
      }

      this.$refs.chars.histogram([])
      if (this.reportType === 'task_success') this.finishedTimeCount()
      if (this.reportType === 'task_failure') this.unFinishedTimeCount()
      if (this.reportType === 'product_task') this.repaired()
    },
    exportTrack(isExportAll) {
      window.parent.postMessage({
        message: 'exportTrack',
        isExportAll,
        chartType: this.reportType,
      }, '*')
    },
    // 工单完成时效统计
    async finishedTimeCount() {
      this.taskCharts = []
      const {params} = this
      this.taskCharts = await ReportApi.finishedTimeCount(params)
    },
    // 工单未完成时效统计
    async unFinishedTimeCount() {
      this.taskCharts = []
      const {params} = this
      this.taskCharts = await ReportApi.unFinishedTimeCount(params)
    },
    // 产品报修率统计-工单 统计
    async repaired() {
      this.loading = true
      this.taskCharts = []
      const {params} = this
      this.taskCharts = await ReportApi.repaired(params)
      this.loading = false
    },   
  },
  components: {
    [EventSelect.name]: EventSelect,
    [EventChart.name]: EventChart,
    [TaskSelect.name]: TaskSelect,
    [TaskChart.name]: TaskChart,
    [ProductSelect.name]: ProductSelect,
    [ProductChart.name]: ProductChart
  }
}
</script>
<style lang="scss" scoped>
.system {
  padding: 12px;
  &-header, &-select {
    padding: 12px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0px 2px 12px 0px rgba(50, 51, 51, 0.12);
  }
  &-select {
    margin-top: 12px;
  }
}
</style>